<template>
  <div class="item" @click="goList(item.id)">
    <div class="box">
      <img class="img" :src="item.coverImgUrl" />
    </div>
    <p class="remd-text">{{item.name.substring(0, 20)}}</p>
  </div>
</template>

<script>
export default {
  props: {
    item: Object
  },
  methods: {
    goList (id) {
      console.log(this.item)
      this.$router.push({
        path: '/songlistDetail',
        query: { id: id }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.item {
  width: 33.33333333%;
  display: inline-block;
  vertical-align: top;
  padding: 0 0.06rem 0.3rem;

  .box {
    position: relative;
    padding-bottom: 100%;

    .img {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 1;
      border-radius: 0.15rem;
      vertical-align: middle;
    }
  }

  .remd-text {
    padding: 0.2rem 0.02rem 0 0rem;
    line-height: 1.4;
    font-size: 0.24rem;
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
